<template>
	<view class="userEvaluate">
		<view class="userEvaluatePositiveReviewRate flex-start-center ">
			<image class="expression"
				:src="(Number(evaluationHeader.favorableRate)?Number(evaluationHeader.favorableRate):100)>50?'/static/40b98bf7d84360f158cf20b5d002782683f13b5039389-wHgRtd.png':'/static/bb39fdc1c8f1de1e3b966eec23133f2f1b198af8b171-FFBuSZ.png'"
				mode="">
			</image>
			<view class="userEvaluateNum flex-column">
				<view style="color: #D85800; font-size: 36rpx;">
					{{evaluationHeader.favorableRate?evaluationHeader.favorableRate:'100'}}%
				</view>
				<view style="color: #666; font-size: 24rpx;">
					好评率
				</view>
			</view>
			<view class=" flex-column" style="padding-left: 20rpx;">
				<view style="color: ##000; font-size: 36rpx;">
					共{{evaluationHeader.evaluationTotal?evaluationHeader.evaluationTotal:'0'}}条评价
				</view>
				<view style="color: #666; font-size: 24rpx;">
					服务单数 {{evaluationHeader.orderTotal?evaluationHeader.orderTotal:'0'}}
				</view>
			</view>


		</view>
		<!-- 评价标签 -->
		<view class="evaluateTab">
			<div class="flex-noWrap-center">
				<div v-for="(i, j) in tabsOptions" :key="j" @click="switchTimeTab(j)"
					:class="currentIndex == j ? 'sel-stauts-class common' : 'stauts-class common'">
					<span>{{ i.value }}</span>
					<span v-if="i.sfyl"> ({{i.sfyl}})</span>
					<span v-if="i.rmxs"> ({{i.rmxs}})</span>
					<span v-if="i.amjsh"> ({{i.amjsh}})</span>
					<span v-if="i.xdzy"> ({{i.xdzy}})</span>
					<span v-if="i.rqlm"> ({{i.rqlm}})</span>
					<span v-if="i.sch"> ({{i.sch}})</span>
					<span v-if="i.gzrz"> ({{i.gzrz}})</span>
				</div>
			</div>
		</view>
		<!-- 全部评价 -->
		<view class="allEvaluations">
			<view class="label">
				全部评价
			</view>
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<view v-if="evaluationList.length">
					<view v-for="(item ,i) in evaluationList" :key="i">
						<view class="flex-between marginTop18">
							<view class="flex-start">
								<image class="avater" :src="item.anonymousNot==1?'/static/niming.png':item.avatar" mode=""></image>
								<view class="flex-column-start">
									<view class="nickName">
										{{item.nickname}}
									</view>
									<view class="timeTitle flex-noWrap ">

										<text class="font-overflow"> {{item.createDate }}
											{{ item.evaluationKeywords}}</text>
									</view>
								</view>
							</view>
							<view v-if="item.score>=4.5" class="flex alignSelf ">
								<image class="expression"
									src="/static/40b98bf7d84360f158cf20b5d002782683f13b5039389-wHgRtd.png" mode="">
								</image>
								<text style="color:#D09600">
									非常好
								</text>
							</view>
							<view class="flex alignSelf " v-if="item.score>=3.5&&item.score<=4">
								<image class="expression"
									src="/static/40b98bf7d84360f158cf20b5d002782683f13b5039389-wHgRtd.png" mode="">
								</image>
								<text style="color:#D09600">
									好
								</text>
							</view>
							<view class="flex alignSelf " v-if="item.score>=2.5&&item.score<=3">
								<image class="expression"
									src="/static/609c9d7afebc2c134b0499a1a2656fa0e3cb7f22ac2a-36VvIz.png" mode="">
								</image>
								<text style="color:#D09600">
									一般
								</text>
							</view>
							<view class="flex alignSelf " v-if="item.score>=1.5&&item.score<=2">
								<image class="expression"
									src="/static/609c9d7afebc2c134b0499a1a2656fa0e3cb7f22ac2a-36VvIz.png" mode="">
								</image>
								<text style="color:#D09600">
									较差
								</text>
							</view>
							<view class="flex alignSelf " v-if="item.score<=1">
								<image class="expression"
									src="/static/bb39fdc1c8f1de1e3b966eec23133f2f1b198af8b171-FFBuSZ.png" mode="">
								</image>
								<text style="color:#D09600">
									差
								</text>
							</view>
						</view>

						<view class="evaluationsContent">
							<view class="evaluationsTitle">
								{{item.technicianEvaluation}}
							</view>
							
						
							  <view  class="flex-start-center-wrap">
							
							    <block v-for="(img) in item.picture">
									  	<image class="image" :src="img" @click="imgScare(img)" mode=""></image>
									  </block>
							  </view>
						
						</view>
					</view>
				</view>
			</mescroll-body>
			<!-- <mescroll-empty v-else></mescroll-empty> -->
			<!--  <sunui-popup ref="pop">
            	<template v-slot:content>
            		<view class="flex-column ">
            			<image class="qrcode" :src="showImgae"></image>
            			
            		</view>
            	</template>
            </sunui-popup> -->

		</view>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				// 图片显示
				showImgae: '',
				currentIndex: 0,
				tabsOptions: [{
						value: '手法一流',
						sfyl: 0
					},
					{
						value: '人美心善',
						rmxs: 0
					},
					{
						value: '按摩技术好',
						amjsh: 0
					},
					{
						value: '相当专业',
						xdzy: 0
					},
					{
						value: '热情礼貌',
						rqlm: 0
					},
					{
						value: '身材好',
						sch: 0
					},
					{
						value: '工作认真',
						gzrz: 0
					}
				],
				evaluationHeader: null,
				evaluationList: [],
				queryobj: {

					pagenum: 1,
					// 每页显示多少条数据
					pagesize: 10
				},
				total: '',
				windowHeight: ''

			}
		},
		onLoad() {
			this.init()
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 104;
				}
			});
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},

		methods: {
			async upCallback(scroll) {
				const result = await this.$http.get({
					url: this.$api.getUserEvaluationList,
					data: {
						technicianId: uni.getStorageSync('technicianId'),
						page: scroll.num,
						limit: 10,
					}
				});

				if (result.code == 200) {

					console.log('result.data', result.data);
					// this.mescroll.endByPage(result.data.list.length, 1);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.evaluationList = [];
					this.evaluationList = this.evaluationList.concat(result.data.list);

					this.evaluationList.forEach((item) => {

						if (item?.picture) {
							if (item?.picture.includes(',')) {
								console.log('字符串中包含逗号');
								// 包含的进行slice(',') 分割
								item.picture = item?.picture.split(',').map((item) => item.trim());
							} else {
								console.log('字符串中不包含逗号');
								item.picture = item?.picture.split();
							}
						}
					})
					console.log(this.evaluationList)
				}
			},
			switchTimeTab(index) {
				this.currentIndex = index


			},
			imgScare(img) {
               console.log(img)
				uni.previewImage({
					urls: [img],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});

			
			},
			// // 上拉触底事件
			// onReachBottom() {
			// 	if (this.queryobj.pagenum * this.queryobj.pagesize >= this.total) {
			// 		return this.$sun.toast('亲 没有更多了~')
			// 	} else {
			// 		this.queryobj.pagenum += 1
			// 		this.getGoodsList()
			// 	}
			// },
			// // 下拉刷新
			// onPullDownRefresh() {
			// 	// 1. 重置关键数据
			// 	this.queryobj.pagenum = 1
			// 	this.total = 0
			// 	// this.isloading = false
			// 	this.evaluationList = []

			// 	// 2. 重新发起请求
			// 	this.getGoodsList(() => uni.stopPullDownRefresh())
			// },
			// async getGoodsList(cb) {
			// 	const resList = await this.$http.get({
			// 		url: this.$api.getUserEvaluationList,
			// 		data: {
			// 			technicianId: uni.getStorageSync('technicianId'),
			// 			...queryobj
			// 		}
			// 	});
			// 	cb && cb()
			// 	// 合并第一页和第二页的数据
			// 	var evaluationList = [...this.evaluationList, ...resList.data.list]

			// 	evaluationList.forEach((item)=>{

			// 		if (item?.picture) {
			// 		      if (item?.picture.includes(',')) {
			// 		        console.log('字符串中包含逗号');
			// 		        // 包含的进行slice(',') 分割
			// 		        item.picture = item?.picture.split(',').map((item) => item.trim());
			// 		      } else {
			// 		        console.log('字符串中不包含逗号');
			// 		        item.picture = item?.picture.split();
			// 		      }


			// 		    }
			// 	})

			// 	this.evaluationList=evaluationList

			// 	// this.total = resList.data.total
			// },
			async init() {
				const resHead = await this.$http.get({
					url: this.$api.getUserEvaluationHead,
					data: {
						technicianId: uni.getStorageSync('technicianId'),
					}
				});


				this.evaluationHeader = resHead.data
				for (const key in this.evaluationHeader) {
					if (this.evaluationHeader.hasOwnProperty(key)) {
						for (const option of this.tabsOptions) {
							if (option[key] !== undefined) {
								option[key] = this.evaluationHeader[key];
							}
						}
						// console.log(option)
					}
				}
				console.log(this.evaluationHeader)
				console.log(this.tabsOptions)
				const resList = await this.$http.get({
					url: this.$api.getUserEvaluationList,
					data: {
						technicianId: uni.getStorageSync('technicianId'),


					}
				});


				resList.data.list.forEach((item) => {

					if (item?.picture) {
						if (item?.picture.includes(',')) {
							console.log('字符串中包含逗号');
							// 包含的进行slice(',') 分割
							item.picture = item?.picture.split(',').map((item) => item.trim());
						} else {
							console.log('字符串中不包含逗号');
							item.picture = item?.picture.split();
						}
					}
				})
				// console.log(resList.data.list)
				this.evaluationList = resList.data.list
			}

		}
	}
</script>

<style lang="less">
	.qrcode {
		// width: 5;
	}

	.userEvaluate {
		padding: 20rpx;

		.userEvaluatePositiveReviewRate {
			.expression {
				width: 102rpx;
				height: 110rpx;
				margin-right: 9rpx;
			}

			.userEvaluateNum {
				padding-right: 20rpx;
				border-right: 2rpx solid #F4F4F4;
			}
		}

		.evaluateTab {
			margin-top: 40rpx;
			padding-bottom: 30rpx;
			// border-bottom: 2rpx solid #cfd1db;

			.common {

				height: 54rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 54rpx;
				margin-right: 30rpx;
				padding: 0 13rpx;
				box-sizing: border-box;
				margin-bottom: 10rpx;
			}

			.sel-stauts-class {
				border-radius: 68rpx;
				// border: 1px solid #1890FF;
				background: #DFFFF3;
				color: #09C680;

			}

			.stauts-class {
				background: #F0F0F0;
				color: #999;
				border-radius: 68rpx;


			}

			.padding10 {
				padding: 0 18rpx;
			}

		}

		.allEvaluations {
			.label {
				color: #000;
				font-size: 14px;
				margin-bottom: 30rpx;
				font-weight: 600;

			}

			.marginTop18 {
				margin-top: 36rpx;
			}

			.avater {
				width: 82rpx;
				height: 82rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}

			.expression {
				width: 50rpx;
				height: 50rpx;
				margin-right: 6rpx;
			}

			.timeTitle {
				margin-top: 14rpx;
				color: #999;
				max-width: 450rpx;
				font-size: 24rpx;
			}

			.alignSelf {
				align-self: flex-start;
				margin-right: 20rpx;
			}

			.evaluationsContent {

				padding: 20rpx 0 20rpx 122rpx;
				border-bottom: 3rpx solid #F4F4F4;

				.evaluationsTitle {
					color: #333;
					margin: 20rpx 0;
					font-size: 28rpx;
				}

				.image {
					width: 176rpx;
					height: 176rpx;
					border-radius: 20rpx;
					padding: 5rpx;
				}

			}
		}
	}

	page {
		background-color: #fff;
	}
</style>